<template>
    <div class="home">
        <el-container>
            <!-- header -->
            <el-header>
                <div class="headerBox">
                  <div class="left" @click="backpast">
                    <img src="@/assets/logo.png" />
                    <span>COCOPAY</span>
                  </div>
                  <div class="right">
                      <!-- language -->
                      <span class="live">
                        <el-dropdown class="language" @command="handlelang">
                          <span class="el-dropdown-link">
                              {{$t('langchg')}}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item command="zh-CN">中文</el-dropdown-item>
                              <el-dropdown-item command="en">English</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </span>
                      <span class="portrait">
                        <img src="@/assets/keyl.png" />
                      </span>
                      <span class="summer">
                        <el-dropdown trigger="click" class="userCen">
                          <span class="el-dropdown-link">
                            {{usemame}}，{{$t('hi')}}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>CSC0731</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </span>
                      <span class="sing">
                        <div class="logout" @click="userLogout">
                          <div>
                            <img src="@/assets/logout.png" />
                          </div>
                          <span>{{$t('logout')}}</span>
                        </div>
                      </span>
                  </div>
                </div>
            </el-header>
            <el-container>
                <!-- aside -->
                <keep-alive>
                  <el-aside :width="isCollapse === false ? '200px' : '65px'">
                      <div class="asideBox">
                        <div class="togglekey" @click="handldWidth" :style="'width:' + (isCollapse === false ? '200px' : '65px')">
                          <i class="el-icon-more" v-if="isCollapse"></i>
                          <i class="el-icon-more-outline" v-if="!isCollapse"></i>
                        </div>
                        <el-menu v-if="!isCollapse" :default-active="activePath" unique-opened :collapse="isCollapse" :collapse-transition="true" router ref="activemenu">
                            <el-submenu :index="'/' + i" v-for="(item, i) in asdList" :key="item.funcId">
                                <template slot="title">
                                  <span>{{item.funcName}}</span>
                                </template>
                                <el-menu-item :id="'menu' + subitem.funcId" :index="subitem.funcPath" v-for="(subitem) in item.children" :key="subitem.funcId" @click="saveNavState(subitem.funcId, subitem.funcPath)">{{subitem.funcName}}</el-menu-item>
                            </el-submenu>
                        </el-menu>
                      </div>
                  </el-aside>
                </keep-alive>
                <!-- 内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {
  getauditsettlepaymentList,
  getuserinfofunlist
} from '@/libs/reqlist.js'
import Cookies from 'js-cookie'
export default {
    data () {
        return {
            // 默认展示地址
            activePath: '',
            // 用户点击的路径
            selPath: '',
            usemame: '',
            // aside信息
            asdList: [],
            selIndex: 0,
            isCollapse: false,
            num: null,
            penIndex: ''
        }
    },
    methods: {
        handldWidth () {
        this.isCollapse = !this.isCollapse
        window.sessionStorage.setItem('isCollapse', this.isCollapse)
        this.activePath = window.sessionStorage.getItem('activePath')
      },
      // logout
      userLogout () {
        const token = window.localStorage.getItem('token')
        if (!token) {
          window.localStorage.clear()
        } else {
          window.localStorage.removeItem('token')
        }
        window.localStorage.clear()
        window.sessionStorage.clear()
        // 跳转到登录界面
        this.$router.push('/login')
      },
      // 保存点击的二级路由
      saveNavState(id, activePath) {
        let editmenu = document.getElementById('menu' + id)
        window.sessionStorage.setItem('activePath', activePath)
        editmenu.classList.add('pickcolor')
        setTimeout(function() {
          editmenu.classList.remove('pickcolor')
          this.num = 0
        }, 500)
        // this.activePath = activePath
      },
      // 获取侧边栏
      getMenu () {
        if (window.sessionStorage.getItem('activePath')) this.activePath = window.sessionStorage.getItem('activePath')
        getuserinfofunlist().then(res => {
          if (res.data.code === '000000') {
            let ownArr = []
            for (let i = 0; i <= res.data.data.length - 1; i++) {
              let jay = res.data.data[i]
              if (jay.flag === true) {
                let mychild = []
                for (let x = 0; x <= jay.children.length - 1; x++) {
                  let damnshine = jay.children[x]
                  if (damnshine.flag === true) {
                    mychild.push(damnshine)
                  }
                }
                jay.children = mychild
                ownArr.push(jay)
              }
            }
            this.asdList = ownArr
          }
        })
      },
      handlelang (command) {
        Cookies.set('language', command)
        this.$router.go(0)
      },
      backpast () {
        let parOne = document.querySelector('.el-menu')
        let endOne = document.querySelector('.is-opened')
        if (parOne !== null) {
          for (let i = 0; i < parOne.childNodes.length; i++) {
            let item = parOne.childNodes[i]
            // endOne.outerText.replace(/\n/g, '|').split('|')[0] ----- 使用'|'符号替换字符串中的回车符
            if (!item.outerText) return
            if (item.outerText === endOne.outerText) {
              this.penIndex = '/' + i
            }
          }
        }
        this.$refs.activemenu.close(this.penIndex)
        this.activePath = '/home'
        this.$router.push('/home')
        window.sessionStorage.removeItem('activePath')
      }
    },
    watch: {
       $route (to, from) {
        if (to.path.indexOf('/sec') === -1) {
          this.activePath = to.path
          window.sessionStorage.setItem('activePath', to.path)
        }
      }
    },
    async mounted () {
      await this.getMenu()
      if (window.sessionStorage.getItem('isCollapse')) this.isCollapse = JSON.parse(window.sessionStorage.getItem('isCollapse', this.isCollapse))
      if (window.sessionStorage.getItem('activePath') !== null) this.activePath = window.sessionStorage.getItem('activePath')
      if (window.sessionStorage.getItem('activePath') === null) this.activePath = '/home'
      this.usemame = window.localStorage.getItem('username')
      let aturl = window.location.href.split('/')
      if (this.activePath) {
        if (aturl[aturl.length - 1] === 'home') {
          this.$router.push(this.activePath)
        }
      }
    },
    destroyed () {
      window.sessionStorage.removeItem('activePath')
    }
}
</script>

<style lang="less" scoped>
@import './pageBox.less';
</style>
